"use strict"

$(document).ready(function () {
	app.init();

	setInterval("app.refresh()", 60 * 1000);
});

var app = {
	const: {
		DATA_API_URI: "./inc/api/data/v1/",
	
		Commands: {
			bigiot_echarts: "bigiot_echarts",
			bigiot_echarts_count: "bigiot_echarts_count"
		},

		BaseOption: {
			title: {
				left: "center",
				subtext: "24小时气温走势图"
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				show: false
			},
			grid: {
				left: '5%',
				right: '5%',
				bottom: '15%',
				containLabel: true,
				show: true,
				backgroundColor: "transparent"
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: [],
				axisPointer: {
					handle: {
						show: true,
						color: '#004E52'
					}
				}
			},
			yAxis: {
				type: 'value',
				axisLabel: {
					formatter: '{value} °C'
				}
			},
			series: []
		}
	},

	controls: {
		container: $("#container"),
		echarts: [],
		echarts_id: []
	},

	init: function () {
		$(window).resize(function () {
			app.resize();
		});

		this.init_echarts();
	},

	init_echarts: function () {
		$.get(app.const.DATA_API_URI + app.const.Commands.bigiot_echarts_count, {}, function (response) {
			if (response.result === "success") {
				var counter = response.counter;

				if (counter == 0) {
					document.write("<h1>Not enough amount of data</h1>");
				} else {
					var height = counter == 1 ? 100 : 50;

					for (var count=0; count < counter; count++) {
						var item = `<div id='echart_${count}' style='height: ${height}%'></div>`;

						app.controls.container.append($(item));

						app.controls.echarts_id[count] = `#echart_${count}`;
						app.controls.echarts[count] = echarts.init(document.getElementById(`echart_${count}`), "dark");
						app.controls.echarts[count].setOption(app.const.BaseOption, true);
					}
				}
			}
		});

		// var option = {
		// 	legend: {
		// 		data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
		// 		right: 20,
		// 		top: "center",
		// 		orient: 'vertical',
		// 	},
		// 	series: [
		// 		// {
		// 		// 	name: '邮件营销',
		// 		// 	type: 'line',
		// 		// 	stack: '总量',
		// 		// 	data: [120, 132, 101, 134, 90, 230, 210],
		// 		// 	smooth: true,
		// 		// }
		// 	]
		// };

		app.refresh();
	},

	resize: function () {
		var my_echarts = app.controls.echarts,
			my_echarts_id = app.controls.echarts_id,
			height_percent = my_echarts.length == 1 ? 100 : window.innerWidth > window.innerHeight ? 100 : 50;

		$.each(my_echarts, function (index) {
			$(my_echarts_id[index]).css("height", `${height_percent}%`);
			my_echarts[index].resize();
		});
	},

	refresh: function () {
		$.get(app.const.DATA_API_URI + app.const.Commands.bigiot_echarts, {}, function (response) {
			if (response.result === "success") {
				// console.log(response.options);
				var my_echarts = app.controls.echarts;

				$.each(my_echarts, function (index) {
					my_echarts[index].setOption({
						title: {
							text: response.options[index].title
						},
						xAxis: {
							data: response.options[index].xAxis
						},
						series: response.options[index].series
					});
				});
			}
		});
	}
};
